import Vue from 'vue'
import Router from 'vue-router'
import store from '../store/index'
import Home from '@/pages/home/Home'
import Product from '@/pages/product/Product'
import MyCenter from "../pages/myCenter/MyCenter"

import AddressList from "../pages/address/AddressList"
import ProductSubmit from "../pages/productSubmit/ProductSubmit";
import ProductParent from "../pages/productSubmit/SubmitParent"

import AddAddress from "../pages/myCenter/address/AddAddress"
import MyOrders from "../pages/myCenter/orders/MyOrders"


Vue.use( Router )

const router = new Router( {
    routes: [
        {
            path: '/',
            name: 'Home',
            components:{
                index:Home,
            } ,
            meta: {
                requireAuth: false,
                tabbarShow:true
            },
        },
        {
            path: '/mine',
            name: 'Mine',
            components: {
                mine: MyCenter
            },
            meta: {
                requireAuth: false,
                tabbarShow: true
            },
        },
        {
            path: '/addAddress/:id?',
            name: 'AddAddress',
            components: {
                default: AddAddress,
            },
            meta: {
                requireAuth: true,
            },
        },
        {
            path: '/myOrders',
            name: 'MyOrders',
            components: {
                default:MyOrders,
            },
            meta: {
                requireAuth: true,
            }
        },
        {
            path: '/product/:id',
            name: 'Product',
            component: Product,
            meta: {
                requireAuth: false,
            },
        },
        {
            path:'',
            name: 'ProductParent',
            components: {
                default: ProductParent,
            },
            children: [
                {
                    path: '/productSubmit/:id',
                    name: 'ProductSubmit',
                    component: ProductSubmit,
                    meta: {
                        tabbarShow: false,
                        requireAuth: true,
                    }
                },
                {
                    path: '/chooseAddr',
                    name: 'ChooseAddr',
                    component: AddressList,
                    meta: {
                        tabbarShow: false,
                        requireAuth: true,
                    }
                }
            ]
        },
        {
            path: '/addressList',
            name: 'AddressList',
            components: {
                default: AddressList,
            },
            meta: {
                tabbarShow: false,
                requireAuth: true,
            }
        },
        // {
        //     path: '/myAddresses',
        //     name: 'MyAddresses',
        //     components: {
        //         mine: MyAddresses,
        //         default: MyAddresses
        //     },
        //     meta: {
        //         tabbarShow: false,
        //         tabContentName: 'mine'
        //     }
        // }
    ]
} )
// 注册全局钩子用来拦截导航
router.beforeEach( ( to, from, next ) => {
    const token = store.getters.getToken
    let tabbarShow = to.meta.tabbarShow===true;
    store.commit( 'updateTabbarShow', tabbarShow );
    if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
        if (token) { // 通过vuex state获取当前的token是否存在
            next()
        } else {
            this.$store.commit( 'LOGOUT' )
            this.$msgbox.alert( '请先登录', '提示' ).then( action => {
                next( {
                    path: '/mine',
                    query: { redirect: to.fullPath } // 将跳转的路由path作为参数，登录成功后跳转到该路由
                } )
            } );
        }
    } else {
        next()
    }
} )

const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
    return originalPush.call(this, location).catch(err => err)
}
export default router
